<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item>公众监督数据管理</el-breadcrumb-item>
		<el-breadcrumb-item>公众监督数据列表</el-breadcrumb-item>
	</el-breadcrumb>
	<el-form :inline="true" size="small" style="margin-top: 20px;" class="demo-form-inline">
		<el-form-item label="省区域">
			<el-select v-model="queryForm.provinceId" @change="changeProvice" style="width: 100px;">
				<el-option :label="province.provinceName" :value="province.provinceId" v-for="province in provinceArr"
					:key="province.provinceId">

				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="市区域">
			<el-select v-model="queryForm.cityId" style="width: 100px;">
				<el-option :label="city.cityName" :value="city.cityId" v-for="city in cityArr" :key="city.cityId">

				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="预估等级">
			<el-select v-model="queryForm.estimatedGrade" style="width: 80px;">
				<el-option :label="aqi.chineseExplain" :value="aqi.aqiId" v-for="aqi in aqiArr" :key="aqi.aqiId">

				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="反馈日期">
			<el-date-picker v-model="queryForm.afDate" type="date" style="width: 100px;" placeholder="选择日期"
				format="YYYY/MM/DD" value-format="YYYY-MM-DD">

			</el-date-picker>
		</el-form-item>
		<el-form-item>
			<el-button type="danger" @click="clear">清空</el-button>
			<el-button type="primary" @click="query">查询</el-button>
		</el-form-item>
		<el-form-item>
			<el-radio-group v-model="queryForm.state">
				<el-radio label="0">未指派</el-radio>
				<el-radio label="1">已指派</el-radio>
			</el-radio-group>
		</el-form-item>
	</el-form>

	<el-table :data="pageVO.data" style="width:100%" :cell-style="{padding: '4px'}" empty-text="无数据">
		<el-table-column prop="afId" label="编号" width="90px" />
		<el-table-column prop="realName" label="反馈者姓名" />
		<el-table-column prop="provinceName" label="所在省" />
		<el-table-column prop="cityName" label="所在市" />
		<el-table-column prop="estimatedGrade" label="预估污染等级">
			<template #default="scope">
				<p :style="{
						color: scope.row.color,
						fontSize: '14px',
						fontWeight: '700',
						textAlign:'center'
					}">
					{{scope.row.aqiExplain}} ({{ scope.row.chineseExplain }})
				</p>
			</template>
		</el-table-column>
		<el-table-column prop="afDate" label="反馈日期" />
		<el-table-column prop="afTime" label="反馈时间" />
		<el-table-column label="操作" width="120px">
			<template #default="scope">
				<el-button link type="primary" size="small" @click="detailClick(scope.row.afId)">
					<el-icon title="查看详情" style="font-size: 20px;">
						<Tickets />
					</el-icon>
				</el-button>
				<el-button link type="primary" size="small">
					<el-icon title="指派网格员" style="font-size: 20px;" v-if="queryForm.state==0"
						@click="assignClick(scope.row)">
						<Pointer />
					</el-icon>
				</el-button>
				<el-button link type="primary" size="small">
					<el-icon title="重新指派" style="font-size: 20px;" v-if="queryForm.state==1"
						@click="assignClick(scope.row)">
						<Edit />
					</el-icon>
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="pagination">
		<el-pagination style="margin-top: 20px" background layout="prev, pager, next" :total="pageVO.count"
			:page-size="pageVO.pageSize" :pager-count="pageVO.pageCount" v-model:current-page="pageNo" />
	</div>

</template>

<script setup>
	import {
		reactive,
		ref,
		inject,
		watch
	} from 'vue';
	import {
		Tickets,
		Pointer,
		Edit
	} from "@element-plus/icons-vue";
	import {
		useRouter
	} from 'vue-router';

	const router = useRouter();

	const queryForm = reactive({
		provinceId: 0,
		cityId: 0,
		estimatedGrade: 0,
		afDate: "",
		state: 0,
	});
	const pageSize = 10;
	const axios = inject("axios");
	const provinceArr = ref([]);
	const cityArr = ref([]);
	const aqiArr = ref([]);
	const pageVO = ref({});

	const pageNo = ref(0);
	watch(pageNo, (newValue, oldValue) => {
		aqiFeedbackPage(newValue);
	});


	const provinceAll = () => {
		let url = "provinceCity/proviceAll";
		axios.get(url, null).then((response) => {
			let r = response.data;
			if (r.ok) {
				provinceArr.value = r.data.provinces;
				cityAll(provinceArr.value[0].provinceId);
				provinceArr.value.unshift({
					provinceId: 0,
					provinceName: "-- 全部 --"
				});
			}
		});
	};

	const cityAll = (provinceId) => {
		let url = "provinceCity/cityAll?provinceId=" + provinceId;
		axios.get(url, null).then((response) => {
			let r = response.data;
			if (r.ok) {
				cityArr.value = r.data.cities;
				cityArr.value.unshift({
					cityId: 0,
					cityName: "-- 全部 --"
				});
			}
		});
	};

	const aqiAll = () => {
		let url = "aqi/aqiAll";
		axios.get(url, null).then((response) => {
			let r = response.data;
			if (r.ok) {
				aqiArr.value = r.data.aqis;
				aqiArr.value.unshift({
					aqiId: 0,
					chineseExplain: "-- 全部 --"
				});
			}
		});
	};

	provinceAll();
	aqiAll();
	const changeProvice = () => {
		cityAll(queryForm.provinceId);
		queryForm.cityId = 0;
	}
	const clear = () => {
		queryForm.provinceId = 0;
		queryForm.cityId = 0;
		queryForm.estimatedGrade = 0;
		queryForm.afDate = "";
		queryForm.state = '0';
	}

	const query = () => {
		aqiFeedbackPage(1);
	}

	const aqiFeedbackPage = (pageNo) => {
		let param = {
			provinceId: queryForm.provinceId == 0 ? null : queryForm.provinceId,
			cityId: queryForm.cityId == 0 ? null : queryForm.cityId,
			estimatedGrade: queryForm.estimatedGrade == 0 ? null : queryForm.estimatedGrade,
			afDate: queryForm.afDate == "" ? null : queryForm.afDate,
			state: queryForm.state,
			pageNo: pageNo,
			pageSize: pageSize,
			assignDate: queryForm.assignDate == null
		}
		let url = "AqiFeedBack/adminPage";
		axios.post(url, param).then((response) => {
			let r = response.data;
			if (r.ok) {
				pageVO.value = r.data.page;
			}
		});
	}

	const onStateChange = () => {
		aqiFeedbackPage(1);
	}
	pageNo.value = 1;


	const detailClick = (afId) => {
		router.push({
			path: '/feedbackInfo',
			query: {
				afId: afId
			}
		})
	}

	const assignClick = (row) => {
		router.push({
			path: '/feedbackAssign',
			query: {
				afId: row.afId,
				provinceId: row.provinceId,
				cityId: row.cityId,
				provinceName: row.provinceName,
				cityName: row.cityName,
			}
		})
	}
</script>

<style>
	.pagination {
		display: flex;
		justify-content: center;
	}
</style>